<template>
  <view>
    <view
      class="plan-card"
      v-for="item in lists"
      :key="item.id"
      @click="blsClick(item)"
    >
      <view class="plan-card-left">
        <view class="left-top">
          <u-image
            v-if="!item.photo"
            width="146rpx"
            height="146rpx"
            src="#"
            border-radius="16rpx"
          ></u-image>
          <u-image
            v-else
            :src="item.photo.split(',')[0]"
            width="146rpx"
            height="146rpx"
            border-radius="16rpx"
          ></u-image>
        </view>
        <view class="left-bottom">
          <u-image
            width="26rpx"
            height="32rpx"
            src="/static/index/location2.png"
          ></u-image>
          <span class="number">{{ item.distance }}km</span>
        </view>
      </view>
      <view class="plan-card-right">
        <view class="right-header">
          <view class="haeder-left">
            <view class="title"> {{ item.petName }} </view>
          </view>
          <view class="header-right">
            <text class="unit">￥</text>
            <text class="number">{{ item.price }}</text>
            <text class="text_12">/只</text>
          </view>
        </view>
        <view class="right-center">
          <custom-tag
            cbackground="#B9EAFF"
            cborder="2rpx solid #00B2FF"
            :text="item.breed"
          ></custom-tag>
          <!-- <custom-tag
            cbackground="rgba(255,214,0,0.05)"
            cborder="2rpx solid #FFD600"
            text="泰迪"
          ></custom-tag> -->
          <custom-tag
            cbackground="rgba(255,214,0,0.05)"
            cborder="2rpx solid #FFD600"
            :text="item.age"
          ></custom-tag>
        </view>
        <view class="right-bottom">
          {{ item.remark ? item.remark : '' }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import customTag from '../custom-tag.vue'
export default {
  components: {
    customTag,
  },
  props: {
    lists: Array,
  },
  methods: {
    blsClick(item) {
      uni.navigateTo({
        url: `/pages/index/jyPd/pd-detail/pd-detail?id=${item.id}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.plan-card {
  display: flex;
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 24rpx;

  .plan-card-left {
    .left-bottom {
      display: flex;
      align-items: center;
      margin-top: 18rpx;

      .number {
        font-weight: 500;
        font-size: 12px;
        color: #999999;
        display: block;
      }
    }
  }

  .plan-card-right {
    flex: 1;

    .right-header {
      display: flex;
      justify-content: space-between;

      .haeder-left {
        display: flex;
        align-items: center;
        padding-left: 16rpx;

        .title {
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
        }
      }

      .header-right {
        font-weight: bold;
        color: #ff7676;
        text-align: left;
        font-style: normal;

        .unit {
          font-size: 24rpx;
        }

        .number {
          font-size: 40rpx;
        }
        .text_12 {
          color: #999;
          font-size: 24rpx;
        }
      }
    }

    .right-center {
      margin-top: 8rpx;
      display: flex;
      flex-wrap: wrap;
    }

    .right-bottom {
      margin-left: 16rpx;
      margin-top: 8rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      display: -webkit-box;
      /* 必须设置此项才能生效 */
      -webkit-line-clamp: 2;
      /* 限制最大行数 */
      -webkit-box-orient: vertical;
      /* 垂直布局 */
      overflow: hidden;
      /* 超出部分隐藏 */
      text-overflow: ellipsis;
      /* 显示省略号 */
    }
  }
}
</style>